<template>
         <div class="notice_conter">
            <ul class="unotice_conter_a" :style="`animation-duration: 4s;`"> 
            <li v-for="item,index in texts" :key="index">{{item}}</li>
            <li v-for="item,index in texts" :key="index + 'a'">{{item}}</li>
            </ul>
        </div>       
</template>

<script>
import { ref} from "vue"
export default {
    props:{
        textList:Array
    },
    setup(props,ctx){
        const texts = ref(props.textList) 
        return{
            texts
        }
    }
}
</script>

<style lang="scss" scoped>
    .notice_conter {
    width: 540px; //容器定宽高
    height: 37px;
    margin: 0 auto;
    font-size: 26px;
    color: #333333;
    overflow: hidden;  //超出内容隐藏
    .unotice_conter_a {
        width: fit-content;  // Q1
        white-space: nowrap; // 内容不换行
        animation-name: seamless-scrolling; // Q3
        animation-timing-function: linear; // 动画速度曲线，匀速
        animation-iteration-count: infinite; // 动画循环无限次播放
        li {
            display: inline-block;
            margin-right: 30px;
        }
    }
    }

@keyframes seamless-scrolling {
    0% {
        transform: translateX(0px);
    }
    100% {
        transform: translateX(-50%); //Q2
    }
}
</style>